<x-guest-layout>
<div class="container mx-auto">
    <form action="{{ route('blogs.search') }}" method="GET" class="mb-6">
        <div class="relative rounded-md shadow-sm">
            <input id="search" name="search" type="search" required
                   class="form-input py-2 px-3 block w-full leading-5 rounded-md transition duration-150 ease-in-out bg-gray-50 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                   placeholder="Search for a blog post">
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                <button type="submit" class="text-indigo-600 hover:text-indigo-500 focus:outline-none focus:text-indigo-500">
                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                              clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
        </div>
    </form>
    <div class="flex flex-wrap -mx-4">
        @foreach ($blogs as $blog)
            <div class="w-full md:w-1/2 lg:w-1/3 px-4">
                <div class="bg-white rounded-lg overflow-hidden shadow-md">
                    <div class="p-6">
                        <h2 class="text-lg font-medium text-gray-900">{{ $blog->title }}</h2>
                        <img src="{{"/storage/".$blog->featured_image}}">
                        <p class="text-gray-600">{{ $blog->body }}</p>
                        <div class="mt-4">
                            <a href="{{ route('blogs.show', $blog) }}" class="text-blue-500 hover:underline">Read more</a>
                        </div>
                        <div class="mt-4">
                            <a href="{{ route('blogs.edit', $blog) }}" class="text-blue-500 hover:underline">edit</a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="mt-4">
        {{ $blogs->links() }}
    </div>
</div>
</x-guest-layout>
